import React, { Component } from 'react'
import styled from 'styled-components'
import NavBar from '../components/NavBar'

const BasicLayoutWrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    flex:1;
    overflow:auto;
  }
  .footer {
    height: 45px;
    background:lightblue;
  }
`;

const BasicLayout = (props: any) => {
  return <BasicLayoutWrapper>
    <h1>BasicLayout</h1>
    <main className="main">
      {props.children}
    </main>
    <footer className="footer">
      <NavBar />
    </footer>
  </BasicLayoutWrapper>
}


export default BasicLayout;
